<template>
  <div class="friendlist">
    <ul>
      <li class="frienditem noborder" v-for="(friend, key) in friendList" :key="key">
        <div
          class="friend-info"
          :class="{active: friend.id == selectFriendId}"
          @click="selectFriend(friend.id)"
        >
          <img :src="friend.img" alt class="avatar" />
          <div class="remark">{{friend.remark}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";

export default {
  computed: {
    ...mapState(["selectFriendId"]),
    ...mapGetters(["friendList"])
  },
  methods: {
    ...mapActions(["selectFriend"])
  }
};
</script>

<style scoped>
.friendlist {
  height: 540px;
  overflow-y: auto;
}

.frienditem {
  border-top: 1px solid #dadada;
}

.frienditem:first-child,
.noborder {
  border-top: none;
}

.list-title {
  box-sizing: border-box;
  width: 100%;
  font-size: 12px;
  padding: 15px 0 3px 12px;
  color: #999;
}

.friend-info {
  display: flex;
  padding: 12px;
  transition: background-color 0.1s;
  font-size: 0;
}

.friend-info:hover {
  background-color: rgb(220, 220, 220);
}

.active {
  background-color: #c4c4c4;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  margin-right: 12px;
}

.remark {
  font-size: 14px;
  line-height: 36px;
}
</style>